<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .message-box {
            position: fixed;
            top: 0px;
            left: 50%;
            background-color: rgba(0, 0, 0, 0.6);
            color: white;
            padding: 10px 20px;
            border-radius: 12px;
            box-shadow: 0px 0px 4px 2px #cccccc;
            max-width: 200px;
            min-width: 80px;
            text-align: center;
            font-size: 14px;
            transform: translate(-50%, -110%);
            /* animation: showTip 3s ease; */
        }

        @keyframes showTip {

            0%,
            100% {
                transform: translate(-50%, -110%);
            }

            20%,
            80% {
                transform: translate(-50%, 100%);
            }
        }
        @keyframes fadeOut{
            0%{
                transform: translate(-50%, 100%);
            }
            100%{
                transform: translate(-50%, -110%);
            }
        }
    </style>
    <script src="./js/vue.js"></script>
    <script>
        function showMessage(msg = "消息提示窗", time = 3000) {
            // let time = 3000;
            // let temp = "<div class='message-box'></div>";
            let messageBox = document.createElement("div");
            messageBox.classList.add("message-box");
            messageBox.style.animation = `showTip ${time}ms ease`;
            messageBox.innerHTML = msg;
            document.body.appendChild(messageBox);
            setTimeout(() => {
                document.body.removeChild(messageBox);
            }, time + 10)
        }
    </script>
</head>

<body>
    <input type="button" value="提示信息" onclick="showMessage()">
    <input type="button" value="提示信息" onclick="showMessage('自定义消息提示')">
    <input type="button" value="提示信息" onclick="showMessage('自定义消息提示',5000)">
    <hr>
    <input type="button" value="vue提示信息" onclick="message()">
    <input type="button" value="vue提示信息" onclick="message('自定义消息提示')">


</body>
<script>
    // Vue.extend 继承函数的第一中用法 - 插件开发
    let Message = Vue.extend({
        template: "<div ref='msg' class='message-box' @mouseover='closeTimer()' @mouseout='openTimer()'>{{ msg }}</div>",
        data() {
            return {
                msg:"默认值",
                time:3000,
                timer: null
            }
        },
        methods: {
            closeTimer() {
                if (this.timer != null) {
                    this.$refs.msg.style.animation = "";
                    this.$refs.msg.style.transform = "translate(-50%, 100%)";
                    clearTimeout(this.timer);
                }
            },
            openTimer() {
                this.$refs.msg.style.animation = 'fadeOut 1000ms ease';
                this.$refs.msg.style.transform = "translate(-50%, -110%)";
                setTimeout(() => {
                    this.$destroy();
                }, 1000)
            }
        },
        mounted() {
            // this.$el
            document.body.appendChild(this.$el);
            this.$refs.msg.style.animation = `showTip ${this.time}ms ease`;
            this.timer = setTimeout(() => {
                this.$destroy();
            }, this.time + 100)
        },
        beforeDestroy() {
            document.body.removeChild(this.$el);
        },
    });

    // let msg = new Message().$mount();
    // console.log(msg.$el);
    // document.body.appendChild(msg.$el)

    // new Message().$mount();
    // function message(msg="默认消息",time=3000) {
    //     new Message({
    //         data:{
    //             msg,time
    //         }
    //     }).$mount();
    // }
    function message(msg,time) {
        let data = {};
        if(msg){
            data.msg = msg;
        }
        if(time){
            data.time = time;
        }
        new Message({
            data:data
        }).$mount();
    }
</script>

</html>